// 1. 导入createRouter和createWebHistory
import { createRouter, createWebHistory } from "vue-router";
import { type RouteLocationNormalized } from "vue-router";

import BasicSyntax from "../pages/BasicSyntax.vue";
import Components from "../pages/Components.vue";
import Reactivity from "../pages/Reactivity.vue";
import RouteTest from "@/pages/RouteTest.vue";
import About from "@/pages/About.vue";
import News from "@/pages/News.vue";
import HomeFirst from "@/pages/HomeFirst.vue";
import NewsDetail from "@/pages/NewsDetail.vue";
import NameView from "@/pages/NameView.vue";

// 2. 创建映射表
const routes = [
  // 路由重定向，通过redirect实现
  {
    path: "/",
    redirect: "/login",
    // 配置路由元信息
    meta: {
      title: "登录页面",
    },
  },
  { path: "/login", component: () => import("../pages/Login.vue") },
  {
    path: "/home",
    component: () => import("../Home.vue"),
    meta: {
      title: "首页",
    },
  },
  { path: "/basic-syntax", component: BasicSyntax },
  { path: "/components", component: Components },
  { path: "/reactivity", component: Reactivity },
  {
    path: "/route-test",
    component: RouteTest,
    children: [
      {
        name: "zhuye",
        path: "home-first",
        component: HomeFirst,
      },
      {
        name: "xinwen",
        path: "news",
        component: News,
        children: [
          //  {
          //   path: 'detail', // 子集路由不需要写斜杠
          //   component: NewsDetail
          //  }

          // 路由传参需要先占位 可传可不传的加？
          {
            name: "detail",
            path: "detail/:id/:title/:content?", // 子集路由不需要写斜杠
            component: NewsDetail,
            // 第一种写法 将路由组件收到的params参数作为props传递给路由组件
            // props: true // 开启props相当于 <NewsDetail id='xxx' title = 'xxx' />

            // 第二种写法，通过props函数，可以返回参数对象
            props(route: RouteLocationNormalized) {
              return route.params;
            },
          },
        ],
      },
      {
        name: "guanyu",
        path: "about",
        component: About,
      },
    ],
  },
  {
    path: "/name-view",
    component: NameView,
    children: [
      {
        // 空字符串路径的子路由允许开发者将多个组件（如默认视图、命名视图）组织在一起，而不需要为每个组件定义单独的路径。
        path: "",
        components: {
          default: () => import("../components/NV.vue"), // 懒加载
          LeftSidebar: () => import("../components/LeftSidebar.vue"), // 懒加载 LeftSidebar 组件
          RightSidebar: () => import("../components/RightSidebar.vue"), // 懒加载 RightSidebar 组件
        },
      },
    ],
  },
  {
    path: "/state-management",
    component: ()=> import("../pages/StateManagement.vue")
  },
  {
    path: "/class-extends",
    component:()=> import("../pages/ClassExtends.vue")
  },
  {
    path: "/ts-study",
    component:()=> import("../pages/TsStudy.vue")
  },
  {
    path: "/ts-type",
    component:()=> import("../pages/TsType.vue")
  },
  {
    path: '/interview',
    component:()=> import('../pages/InterView.vue')
  },
  {
    path: "/keepalive",
    component:()=> import('../pages/StudyKeepAlive.vue')
  },
  {
    path: "/mylist",
    component:()=> import('../pages/myList.vue')
  }
];
// 3. 调用createRouter 创建路由器实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 配置权限白名单
const whileList = ["/", "/login"];
// 全局前置守卫 应用场景[身份验证，权限管理，加载态等等]
router.beforeEach((to, from, next) => {
  if (whileList.includes(to.path) || localStorage.getItem("token")) {
    next();
  } else {
    // 回到登录页面
    alert("即将跳转到登录页面");
    next("/");
  }
});
// 全局后置守卫 应用场景 [页面标题设置，清理滚动条，清理上个页面的定时器 记录日志等]
router.afterEach((to, from) => {
  // console.log('to', to)
  const pageTitle = (to.meta.title as string) || "默认标题";
  document.title = pageTitle;
});
// 4. 暴露路由实例，然后挂载到app实例上
export default router;
